import React, { Component } from 'react';
import { Button, Popover } from 'antd';
import _ from 'underscore';
import 'fabric';
import WrapPage from './_wrap'
import styles from './main.less';
import matrix from './matrix';
import Tran from './tran.js';
import ImgFilter from './filter.js';
import api from '../model/_api';
import { Slider, Input, Row, Col, Layout, Menu, Breadcrumb, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;
import ReactList from 'react-list';
import data from './data';
import test from './test';

import ReactFabricEditor from 'react-fabric-editor';
import 'antd/dist/antd.css';



class _Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: '',//父级点击传给的数据rul
      filterVisible: false,
      collapsed: false,
      canvas: null,
      isTran: false,
      tranItem: null,
      brightness: 0,
      contrast: 0,
      saturation: 0,
      blur: 0,
      hue: 0,
      opacity: 0,
      accounts: data,
      url: '',
      data: test,
      readPath: 'http://127.0.0.1:22222/file/',
      addPath: 'http://127.0.0.1:22222/System/addItem',
      listData: [],

    };
    this.dots = [];
    this.dotscopy = null;
    this.idots = null;
    this.count = 10;
    this.el, this.lastActive, this.cob;
    this.selection_object_left = 0;
    this.selection_object_top = 0;
    this.isCropping = false;



  }

  componentDidMount() {
    this.initData();
  }

  initData = async () => {
    let d = await api('http://127.0.0.1:22222/System/fetch', { "filter": {} });
    this.setState({ listData: d.data.list });
  }

  itemClickHandler = (v) => {
    this.setState({ url: v });
  }

  listClickHandler = (v) => {
    console.log(v);
    this.setState({ data: JSON.parse(v.value) });
  }

  renderItem = (index, key) => {
    let names = this.state.accounts[index].split('/');
    return <div style={{ height: 65 }} onClick={() => this.itemClickHandler(this.state.accounts[index])} key={this.state.accounts[index]}><img src={this.state.accounts[index]} style={{ width: 50, height: 60, marginLeft: "10px" }} /><span style={{ marginLeft: "10px", display: !this.state.collapsed ? '' : "none" }} >{names[names.length - 1]}</span></div>;
  }

  renderList = (index, key) => {
    let names = this.state.listData[index].cnum;
    return <div style={{ height: 65 }} onClick={() => this.listClickHandler(this.state.listData[index])} key={this.state.listData[index].cnum}><span style={{ marginLeft: "10px", display: !this.state.collapsed ? '' : "none" }} >{this.state.listData[index].cnum}</span></div>;
  }


  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  /**ReactFabricEditor 选中处理 */

  selectHandle = (v) => {
    console.log(v, '-----------------');
  }

  onUploadFun = async (item) => {
    return await api('http://127.0.0.1:22222/image/upload', item);
  }
  onAddFun = async (item) => {
    //Cases name 
    const abc = await api('http://127.0.0.1:22222/System/addItem', item);

    this.initData();
  }

  temp = async () => {
    let c = await this.refs.reactFabricEditor.uploadOpus();

  }

  render() {
    const sh = document.body.clientHeight - 53;

    return (
      <div>
        <Layout>
          <Sider
            collapsible
            collapsed={this.state.collapsed}
            onCollapse={this.onCollapse}
          >

            <div style={{ overflow: 'auto', maxHeight: sh }}>
              <ReactList key={'asdfasdf'} itemRenderer={this.renderList}
                length={this.state.listData.length}
                type='uniform' />
              <ReactList key={'333333'} itemRenderer={this.renderItem}
                length={this.state.accounts.length}
                type='uniform' />
            </div>

          </Sider>
          <Layout>
            <Button onClick={() => this.refs.reactFabricEditor.uploadOpus()}>上传</Button>
            <Button onClick={() => this.refs.reactFabricEditor.restore()}> 恢复 </Button>
            <Button onClick={()=>this.refs.reactFabricEditor.reset()}>清空</Button>
            <Content style={{ margin: '0 16px' }}>
              <ReactFabricEditor ref='reactFabricEditor'
                readPath={this.state.readPath} pselectUrl={this.state.url}
                data={this.state.data} onSelectFun={this.selectHandle}
                onUploadFun={this.onUploadFun}
                readPath={this.state.readPath}
                onAddFun={this.onAddFun} />
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              Ant Design ©2016 Created by Ant UED
          </Footer>
          </Layout>
        </Layout>
      </div>
    );
  }
}

export default _Page
